import React,{useState,useEffect} from 'react'
import { Input } from './Input';
import { List } from './List';


//! 相当于render 只要状态一更新，函数执行一次
const Todolist = () => {
    
    const [list,setList]=useState([1,2,3]);

    const addItem=(val)=>{
        setList([val,...list]);//!异步，下面不能立刻拿到新的值
    }
    useEffect((val)=>{
        localStorage.setItem('todolist',JSON.stringify([val,...list]));
    },[list])

    return (
        <div>
            {/* 状态包含更新状态的方法都要传过去 */}
            {/* <Input addItem={addItem} val={val} setVal={setVal}/> */}
            <Input addItem={addItem}/>
            <List list={list}/>
        </div>
    )
}

export default Todolist;
